<template>
    <div>
        <slot></slot>
        <div class="video-box">
            <div class="video-lift">
                <img :src="data.img"  alt="">
                <div class="ll"><p>立即报名</p></div>
            </div>
            <div class="video right">
                <ul>
                    <li v-for="(item, idx) in 10">
                        <span></span> 13:30 &nbsp;&nbsp;&nbsp; {{data.title}}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'ZrzVideo',
    props:{
        data:{default:''}
    },
    created(){
        console.log(this.data,3333333333)
    }
    
}

</script>

<style lang="less" scoped>
div {
    .video-box {
        display: flex;
        margin-bottom: 25px;

        .video-lift {
         position: relative;
            img {
                width: 620px;
            }
            .ll{
                width: 620px;
                height: 347px;
                background-color: rgba(0, 0, 0, 0.5);
                position: absolute;
                left: 0;
                top: 0;
                p{
                    color: #fff;
                    margin: auto;
                    width: 180px;
                    height: 50px;
                    margin-top: 150px;

                    background-color: #23b8ff;
                    border-radius: 10px;
                    font-size: 20px;
                    text-align: center;
                    line-height: 50px;
                }
            }
        }

        .video.right {
            ul {
                height: 348px;
                overflow: auto;
                list-style: disc;
                width: 580px;

                li {
                    padding: 0 48px;
                    font-size: 16px;
                    line-height: 50px;
                    list-style: disc;
                    cursor: pointer;
                    color: #333;
                    background-color: #eee;

                    &:hover {
                        color: #23b8ff;

                    }

                    &:hover span {
                        background-color: #23b8ff;

                    }

                    span {
                        display: inline-block;
                        height: 8px;
                        width: 8px;
                        border-radius: 4px;
                        background: #ccc;
                        margin-right: 12px;
                    }
                }
            }

        }
    }
}
</style>